import React, { Component } from 'react';
import './Myquanshang.scss'
import img from '../imgs/z03.gif'

class Myquanshang extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            arr1:["综合","销量","新品","价格","筛选"],
            arr:[
                {name:"黛珂",pic:img,xiao:20,huo:250},
                {name:"黛珂",pic:img,xiao:10,huo:200},
                {name:"兰蔻",pic:img,xiao:30,huo:150},
                {name:"雅诗兰黛",pic:img,xiao:40,huo:100},
            ]
        }
    }
   
    handeClick(index){
        this.setState({
            currentIndex:index
        })
        if(index == 1){
            this.state.arr.sort((a,b)=>{
                return a.xiao - b.xiao
            })
        }else if(index == 3){
            this.state.arr.sort((a,b)=>{
                return b.huo - a.huo
            })
        }
    }
    render() {
        return (
            <>
            <div className="big">
                <div className="inputbox">
                    <div className="fen"><h3>全部商品</h3></div>
                    <div className="box">
                    <input type="text" placeholder="搜索店铺内商品名"/>
                    </div>         
                </div>
            <div className="xia">
            {
                        this.state.arr1.map((item,index)=>{
                            return (
                                <div className="pai" key={index} style={{color: this.state.currentIndex == index ? 'red' : ''}} onClick={()=>{
                                    this.handeClick(index)
                               }
                               }>
                               <div className="samll">{item}</div>
                              </div>    
                            )
                        })
                    }  
            </div> 
            </div>
            
            <div className="quan">
                {
                    this.state.arr.map((item,index)=>{
                        return (
                            <div className="box" key={index} >
                            <img src={item.pic} alt=""/>
                            <p>{item.name}</p>
                            <p>销量：{item.xiao}</p>
                            <p>活动价￥{item.huo}</p>
                        </div>
                        )
                    })
                }
            </div>
            </>
        );
    }
}

export default Myquanshang;